<template>
	<view class="container">
		<view class="box">
			<view class="cell flex-ac flex-b">
				<view class="hd"><text style="color: #FF372C;">*</text>客户类型</view>
				<view class="md" @click="show1 = true">
					<input type="text" style="pointer-events: none;" v-model="customerTypeName" disabled placeholder="请选择" placeholder-style="color: #cccccc;" />
				</view>
				<image src='../../../static/img/yjt.png' class="more" mode=""></image>
			</view>
			<u-select v-model="show1" mode="single-column" :list="customerType" @confirm="confirmCustomerType" label-name="name" value-name="code" title="选择客户类型" confirm-color='#1674fc'></u-select>
			
			<view class="cell flex-ac flex-b" @click.stop="$Jump.Open('./selCustomer/selCustomer?type=' + form.customerType)">
				<view class="hd"><text style="color: #FF372C;">*</text>客户名称</view>
				<view class="md">
					<input type="text" style="pointer-events: none;" v-model="form.customerName" disabled placeholder="请选择" placeholder-style="color: #cccccc;" />
				</view>
				<image src='../../../static/img/yjt.png' class="more" mode=""></image>
			</view>
		</view>
		
		<view class="dz flex-ac">
			<view style="font-weight: bold;">线路信息</view>
			<view class="btn" @click="selRouter">选择线路</view>
		</view>
		<view class="box">
			<view class="cell flex-ac flex-b">
				<view class="hd"><text style="color: #FF372C;">*</text>发货人</view>
				<view class="md flex-ac">
					<input type="text" v-model="form.senderName" placeholder="请输入" @input="resetRouterId()" placeholder-style="color: #cccccc;" />
				</view>
				<image src='../../../static/img/yjt.png' class="more" mode=""></image>
			</view>
			<view class="cell flex-ac flex-b">
				<view class="hd"><text style="color: #FF372C;">*</text>发货人电话</view>
				<view class="md flex-ac">
					<input type="number" v-model="form.senderMobile"  @input="resetRouterId()" placeholder="请输入" placeholder-style="color: #cccccc;" />
				</view>
				<image src='../../../static/img/yjt.png' class="more" mode=""></image>
			</view>
			<view class="cell flex-ac flex-b" @click="$Jump.Open('./map/map?type=1')">
				<view class="hd"><text style="color: #FF372C;">*</text>装货地址</view>
				<view class="md flex-ac">
					<textarea style="pointer-events: none;" type="text" v-model="form.loadingAddress" disabled auto-height placeholder="请选择" placeholder-style="color: #cccccc;" />
				</view>
				<image src='../../../static/img/yjt.png' class="more" mode=""></image>
			</view>
			<view class="cell flex-ac flex-b">
				<view class="hd"><text style="color: #FF372C;">*</text>装货电子围栏</view>
				<view class="md flex-ac">
					<input type="number" v-model="form.loadingElectricFence"  @input="resetRouterId()" placeholder="请输入" placeholder-style="color: #cccccc;" />
				</view>
				<view style="margin-left: 10rpx;">米</view>
			</view>
			<view class="cell flex-ac flex-b">
				<view class="hd"><text style="color: #FF372C;">*</text>收货人</view>
				<view class="md flex-ac">
					<input type="text" v-model="form.receiverName"  @input="resetRouterId()" placeholder="请输入" placeholder-style="color: #cccccc;" />
				</view>
				<image src='../../../static/img/yjt.png' class="more" mode=""></image>
			</view>
			<view class="cell flex-ac flex-b">
				<view class="hd"><text style="color: #FF372C;">*</text>收货人电话</view>
				<view class="md flex-ac">
					<input type="number" v-model="form.receiverMobile"  @input="resetRouterId()" placeholder="请输入" placeholder-style="color: #cccccc;" />
				</view>
				<image src='../../../static/img/yjt.png' class="more" mode=""></image>
			</view>
			<view class="cell flex-ac flex-b" @click="$Jump.Open('./map/map?type=2')">
				<view class="hd"><text style="color: #FF372C;">*</text>卸货地址</view>
				<view class="md flex-ac" @click="show3 = true">
					<textarea style="pointer-events: none;" type="text" v-model="form.unloadingAddress" disabled auto-height placeholder="请选择" placeholder-style="color: #cccccc;" />
				</view>
				<image src='../../../static/img/yjt.png' class="more" mode=""></image>
			</view>
			<view class="cell flex-ac flex-b">
				<view class="hd"><text style="color: #FF372C;">*</text>装货电子围栏</view>
				<view class="md flex-ac">
					<input type="number" v-model="form.unloadingElectricFence"  @input="resetRouterId()"  placeholder="请输入" placeholder-style="color: #cccccc;" />
				</view>
				<view style="margin-left: 10rpx;">米</view>
			</view>
			<view class="cell flex-ac flex-b">
				<view class="hd"><text style="color: #FF372C;">*</text>里程</view>
				<view class="md flex-ac">
					<input type="text" v-model="form.mileage"  @input="resetRouterId()" placeholder="请输入" placeholder-style="color: #cccccc;" />
				</view>
				<view style="margin-left: 10rpx;">km</view>
			</view>
			<view class="cell flex-ac flex-b">
				<view class="hd"><text style="color: #FF372C;">*</text>额定油耗</view>
				<view class="md flex-ac">
					<input type="text" v-model="form.oilConsum" placeholder="请输入" placeholder-style="color: #cccccc;" />
				</view>
				<view style="margin-left: 10rpx;">元</view>
			</view>
		</view>

		<view class="dz flex-ac">
			<view style="font-weight: bold;">货物信息</view>
		</view>

		<view class="box">
			<view class="cell flex-ac flex-b">
				<view class="hd">品名</view>
				<view class="md flex-ac" @click="show2 = true">
					<textarea style="pointer-events: none;" type="text" v-model="form.goodsName" disabled auto-height placeholder="请选择" placeholder-style="color: #cccccc;" />
				</view>
				<image src='../../../static/img/yjt.png' class="more" mode=""></image>
			</view>
			<u-select v-model="show2" mode="single-column" :list="goodsNameList" label-name="name" value-name="id" @confirm="confirmGoodsName" title="选择品名" confirm-color='#1674fc'></u-select>
			<view class="cell flex-ac flex-b">
				<view class="hd">单价</view>
				<view class="md flex-ac">
					<textarea type="text" v-model="form.price" auto-height placeholder="请输入" placeholder-style="color: #cccccc;" />
				</view>
				<view style="margin-left: 10rpx;">元</view>
			</view>
			<view class="cell flex-ac flex-b">
				<view class="hd"><text style="color: #FF372C;">*</text>订单数量</view>
				<view class="md flex-ac">
					<input type="text" v-model="form.orderNum" placeholder="请输入" placeholder-style="color: #cccccc;" />
				</view>
				<view style="margin-left: 10rpx;">吨</view>
			</view>
			<view class="cell flex-ac flex-b">
				<view class="hd"><text style="color: #FF372C;">*</text>客户要求时间（开始）</view>
				<view class="md" @click="show4 = true">
					<input type="text" style="pointer-events: none;" v-model="form.requiredTimeBegin" placeholder="请选择" disabled placeholder-style="color: #cccccc;" />
				</view>
				<image src='../../../static/img/yjt.png' class="more" mode=""></image>
			</view>
			<view class="cell flex-ac flex-b">
				<view class="hd"><text style="color: #FF372C;">*</text>客户要求时间（结束）</view>
				<view class="md" @click="show5 = true">
					<input type="text" style="pointer-events: none;" v-model="form.requiredTimeEnd" placeholder="请选择" disabled placeholder-style="color: #cccccc;" />
				</view>
				<image src='../../../static/img/yjt.png' class="more" mode=""></image>
			</view>
		</view>
		<u-picker mode="time" v-model="show4" title="客户要求时间（开始）" :params="params" confirm-color='#1674fc' @confirm="getplanLoadTime"></u-picker>
		<u-picker mode="time" v-model="show5" title="客户要求时间（结束）" :params="params" confirm-color='#1674fc' @confirm="getplanUnloadTime"></u-picker>

		<view class="box">
			<view class="cell flex-ac flex-b" @click="remarkShow = true">
				<view class="hd">备注</view>
				<view class="md">
					<textarea v-model='form.remark' type="text"  auto-height placeholder="请输入" placeholder-style="color: #cccccc;" />
				</view>
			</view>
		</view>

		<view class="foot">
			<view class="btnBox flex-ac">
				<view class="btn-1 middle" style="background-color: #1674fc;" @click="submit">确定</view>
			</view>
			<x-botSpace></x-botSpace>
		</view>

	</view>
</template>

<script>
	import { goodsType } from '@/utils/goodsType.js'; // 
	import { businessType } from '@/utils/businessType.js'; // 
	import BzDatePicker from '@/components/bz-date-picker/bz-date-picker'
	export default {
		components: {
		  BzDatePicker,
		},
		data() {
			return {
				type: 1, // 1新建  2编辑  3复制
				id: '',
				carTypeShow: false,
				remarkShow: false,
				customerTypeName: '', 
				form: {
					customerAccount: '', //客户户头
					customerId: '', //客户id
					customerType: '', // 客户类型
					customerRouteId: '' ,// 客户线路id
					customerName: '', // 客户名称
					goodsId: '',
					goodsName: '',
					loadingAddress:'',
					loadingElectricFence:'',
					loadingLongitude:'',
					loadingLatitude:'',
					mileage:'',
					oilConsum:'',
					price:'',
					receiverMobile:'',
					receiverName:'',
					senderMobile:'',
					senderName:'',
					unloadingAddress:'',
					unloadingElectricFence:'',
					unloadingLatitude:'',
					unloadingLongitude:'',
					orderNum: '',
					requiredTimeBegin: '',
					requiredTimeEnd: '',
					remark: ''
				},
				businessTypeName: '',
				goodsType: goodsType,
				customerType: [], 
				show1: false, 
				goodsNameList: [],
				show2: false,
				ddyList: [],
				show3:false,
				cxList: [], //车型List
				ccList: [], //撤场list
				show4: false,
				show5: false,
				params: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: true
				},
				isLoading: false,
				dateTime: '',
				organizationId: '',
				time: 1
			}
		},
		onLoad(opt) {
			if (opt) console.log('opt:', opt)
			if(opt.id){
				this.form.id = opt.id
				uni.setNavigationBarTitle({
					title: '编辑'
				})
			}
			this.GetCustomerType()
			this.GetGoodsName()
		},
		watch:{
			"form.customerType"(){
				this.time++
				if(this.time == 2) return
				this.form.customerAccount = ''
				this.form.customerId = ''
				this.form.customerRouteId = ''
				this.form.customerName = ''
			}
			// 'form.customerName'(){
				
			// },
		},
		methods: {
			resetRouterId(){
				this.form.customerRouteId = ''
			},
			getOrderInfo(id){
				this.$Net.get('/order/detail/' + id).then(res=>{
					console.log('订单详情:', res)
					this.form = res.data
					this.customerTypeName = this.customerType.filter(el=> el.code == this.form.customerType)[0].name
				})
			},
			selRouter(){
				if(this.form.customerId === '') return this.$Toast.message('请先选择客户')
				this.$Jump.Open('./selRouter/selRouter?id=' + this.form.customerId)
			},
			GetCustomerType(){
				this.$Net.get('/sysDict/code/customer_type').then(res=>{
					console.log('客户类型：', res)
					this.customerType = res.data
					if(this.form.id){
						this.getOrderInfo(this.form.id)
					}
				})
			},
			GetGoodsName(){
				this.$Net.get('/goods/page', {current: 1, size: 10}).then(res=>{
					console.log('品名：', res)
					this.goodsNameList = res.data
				})
			},
			confirmCustomerType(val) {
			  console.log('confirm', val)
			  this.form.customerType = val[0].value
			  this.customerTypeName = val[0].label
			},
			confirmGoodsName(val) {
			  console.log('confirm', val)
			  this.form.goodsId = val[0].value
			  this.form.goodsName = val[0].label
			},
			handleDatePickerCancel() {
			  console.log('cancel')
			},
			handleDatePickerClose() {
			  console.log('close')
			},
			// 提交
			submit(){
				if(this.form.customerType === '' ) return this.$Toast.message('请完善信息')
				if(this.form.customerName === '') return this.$Toast.message('请完善信息')
				if(this.form.senderMobile === '') return this.$Toast.message('请完善信息')
				if(this.form.senderName === '') return this.$Toast.message('请完善信息')
				if(this.form.loadingAddress === '') return this.$Toast.message('请完善信息')
				if(this.form.loadingElectricFence === '') return this.$Toast.message('请完善信息')
				if(this.form.senderMobile === '') return this.$Toast.message('请完善信息')
				if(this.form.senderName === '') return this.$Toast.message('请完善信息')
				if(this.form.mileage === '') return this.$Toast.message('请完善信息')
				if(this.form.oilConsum === '') return this.$Toast.message('请完善信息')
				if(this.form.goodsName === '') return this.$Toast.message('请完善信息')
				if(this.form.orderNum === '') return this.$Toast.message('请完善信息')
				if(this.form.requiredTimeBegin === '') return this.$Toast.message('请完善信息')
				if(this.form.requiredTimeEnd === '') return this.$Toast.message('请完善信息')
				this.$Net.post('/order/add',this.form).then(res=>{
					console.log('提交:', res)
					// uni.setStorageSync('createForm', this.form)
					this.$Toast.messageIcon('操作成功')
					setTimeout(()=>{
						this.$Jump.Back(1)
					},1500)
				})
			},
			// 选择车型
			chooseCx(name){
				this.form.useVehicleModel = name
			},
			// 选择车长
			chooseCc(name){
				this.form.useVehicleLength = name
			},
			// 计划装货时间
			getplanLoadTime(e){
				console.log('e:', e)
				this.form.requiredTimeBegin = e.year + '-' + e.month + '-' + e.day + ' ' + e.hour + ':' + e.minute + ':' + e.second
				// this.form.requiredTimeBegin = e + ':00'
			},
			// 计划卸货时间
			getplanUnloadTime(e){
				console.log('e:', e)
				this.form.requiredTimeEnd = e.year + '-' + e.month + '-' + e.day + ' ' + e.hour + ':' + e.minute + ':' + e.second
				// this.form.requiredTimeEnd = e + ':00'
			},
			// 选择调度员
			confirmDdy(e){
				console.log('e:', e)
				this.form.dispatcherMobile = e[0].label.split('-')[1]
				this.form.dispatcherName = e[0].label.split('-')[0]
			},
			// 选择项目类型
			confirmYwlx(e){
				this.form.businessTypeCode = e[0].value
				this.businessTypeName = e[0].label
			},
			// 选择项目
			confirmXmmc(e){
				console.log('e:', e)
				this.form.projectName = e[0].label
			},
			//调度员选择器列表
			getDdlist(id){
				this.$Net.get('/consignorApi/goodsSource/dispatcherList',{
					orgId: id
				}).then(res=>{
					console.log('调度：', res)
					if(res.data.length > 0){
						res.data.map(el=>{
							el.label = el.realName + '-' + el.phone
						})
						this.ddyList = res.data
					}
				})
			},
			
			// 获取项目列表 
			getxmList(id){
				this.$Net.get('/consignorApi/projectManage/listBySelect',{
					consignorId: id,
				}).then(res=>{
					console.log('项目列表:', res)
					if(res.data.length > 0){
						this.xmList = res.data.map(el=>{
							return {
								value: el.id,
								label: el.projectName
							}
						})
					}
				})
			},
			// 获取车型
			getCxlist(){
				this.$Net.get('/consignorApi/vehicleModel/listBySelect').then(res=>{
					console.log('车型:', res)
					let arr = [
						{ notUpdateFlag: 'Y', statusFlag: 'enable', vehicleModelName: '不限', isSel: false }
					]
					res.data.map(el=>{
						if(el.statusFlag == 'enable'){
							el.isSel = false
							arr.push(el)
						}
						this.cxList = arr
					})
				})
			},
			// 获取车车长
			getCclist(){
				this.$Net.get('/consignorApi/vehicleLength/listBySelect').then(res=>{
					console.log('车长:', res)
					let arr = [
						{ notUpdateFlag: 'Y', statusFlag: 'enable', vehicleLengthName: '不限', isSel: false }
					]
					res.data.map(el=>{
						if(el.statusFlag == 'enable'){
							el.isSel = false
							arr.push(el)
						}
						this.ccList = arr
					})
				})
			},
			// 获取托运人详情
			getUserInfo(){
				this.$Net.get('/consignorApi/consignor/detail').then(res=>{
					console.log('托运人详情：', res)
					this.id = res.data.id
					this.form.consignorCard = res.data.consignorCard
					this.form.consignorMobile = res.data.consignorMobile
					this.form.consignorName = res.data.consignorName
					this.organizationId = res.data.organizationId
					this.getxmList(res.data.id)
					this.getDdlist(res.data.organizationId)
				})
			},
			
			
			// 获取货物详情
			getGoodsInfo(){
				this.$Net.get('/consignorApi/goodsSource/detail', {
					id: this.id
				}).then(res=>{
					console.log('货源详情：', res)
					this.isLoading = true
					this.businessTypeName = this.getBusinessTypeName(res.data.businessTypeCode)
					this.form = res.data
					if(this.type == 3) this.form.id = ''
				})
			},
			
			// 根据code获取业务类型
			getBusinessTypeName(code){
				for(let i=0; i<this.businessType.length; i++){
					if(this.businessType[i].value == code){
						return this.businessType[i].label
						break
					}
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f9f9f9;
	}
</style>

<style lang="scss" scoped>
	@import './createGoods.scss';
</style>